<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import daglService from '@/api/dagl'
import LogicFlow from '@logicflow/core'
import Flow from '@/components/flow/index.vue'
import { Snapshot } from '@logicflow/extension'
import { ygdlcgz } from '../flow'
import lodash from 'lodash'
import { TgspjlListOutputDTO } from '@/api/dagl-dto'
LogicFlow.use(Snapshot)
/** logicflow实例 */
const lf = ref<LogicFlow | undefined>()
const flowRef = ref()
const flowJson = ref()
const imgSrc = ref()
const loading = ref(false)

const tHeight = computed(() => {
  return '100%'
  // if (currentJylxmc.value === '跨院') return 'calc(80vh - 440px)'
  // return 'calc(80vh - 240px)'
})
/*
 * 打开弹框
 */
const dialogVisible = ref(false)

const openDialog = (row: any) => {
  // 获取归档跟踪信息
  getLclb(row)
  // currentJyspzt.value = row.jyztmc
  dialogVisible.value = true
  loading.value = true
  // currentJylxmc.value = row.jylxmc
  flowJson.value = lodash.cloneDeep(ygdlcgz.json)
}

/*
 * 获取流程列表
 */
// 流转记录
const curTgjddm = ref('')
const lzjlList = ref<TgspjlListOutputDTO[]>([])
const getLclb = (row: TgspjlListOutputDTO) => {
  const params = {
    tgjlbh: row.jlbh || row.tgjlbh,
  }
  daglService
    .queryJyshlc(params)
    .then((res) => {
      lzjlList.value = res.data?.tgspjlList
      curTgjddm.value = res.data?.tgjddm
      generateByFlow()
      setTimeout(() => {
        lf.value?.getSnapshotBase64().then((res: any) => {
          imgSrc.value = res.data
        })
        loading.value = false
      }, 800)
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const generateByFlow = () => {
  if (['gd0160005', 'gd0160006', 'gd0160007', 'gd0160008'].includes(curTgjddm.value)) {
    const node = flowJson.value.nodes.find((node: any) => node.id === 'flowend')
    node.properties = {
      complete: true,
    }
  } else {
    const node = flowJson.value.nodes.find((node: any) => node.id === curTgjddm.value)
    console.log(node)
    node.properties = {
      current: true,
    }
  }
  const node = flowJson.value.nodes.find((node: any) => node.id === 'startflow')
  node.properties = {
    complete: true,
  }

  lzjlList.value.forEach((lc) => {
    const node = flowJson.value.nodes.find((node: any) => node.id === lc.shjddm)
    node.properties = {
      complete: true,
    }

    if (lc.shjddm === 'gd0160001') {
      if (lc.shjg === '1') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160001' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }

        const node = flowJson.value.nodes.find((node: any) => node.id === 'bccl')
        node.properties = {
          complete: true,
        }

        const temp = lzjlList.value.find((lc) => lc.shjddm === 'gd0160002')
        if (temp) {
          const edge = flowJson.value.edges.find(
            (edge: any) => edge.sourceNodeId === 'bccl' && edge.text.value === '否',
          )
          edge.properties = {
            complete: true,
          }
        } else {
          const edge = flowJson.value.edges.find(
            (edge: any) => edge.sourceNodeId === 'bccl' && edge.text.value === '是',
          )
          edge.properties = {
            complete: true,
          }
        }
      } else if (lc.shjg === '2') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160001' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
    }

    if (lc.shjddm === 'gd0160002') {
      if (lc.shjg === '1') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160002' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjg === '2') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160002' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
    }

    if (lc.shjddm === 'gd0160003') {
      if (lc.shjg === '1') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160003' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjg === '2') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160003' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
    }

    if (lc.shjddm === 'gd0160004') {
      if (lc.shjg === '1') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160004' && edge.text.value === '通过',
        )
        edge.properties = {
          complete: true,
        }
      } else if (lc.shjg === '2') {
        const edge = flowJson.value.edges.find(
          (edge: any) => edge.sourceNodeId === 'gd0160004' && edge.text.value === '退回',
        )
        edge.properties = {
          complete: true,
        }
      }
    }
  })
}

const closeDialog = () => {
  flowJson.value = undefined
  imgSrc.value = ''
}

defineExpose({
  openDialog,
})
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="流程跟踪"
    width="1200"
    :close-on-click-modal="false"
    @closed="closeDialog"
  >
    <div class="dialog-box" v-loading="loading">
      <div class="flow-box">
        <Flow
          v-show="!imgSrc"
          ref="flowRef"
          :json="flowJson"
          @created="(value: LogicFlow) => lf = value"
        >
        </Flow>
        <img :src="imgSrc" alt="" />
      </div>
      <el-table v-if="imgSrc" :data="lzjlList" style="width: 100%" :height="tHeight">
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="shjdmc" label="流程节点" width="180" show-overflow-tooltip />
        <el-table-column prop="bmmc" label="部门" width="180" show-overflow-tooltip />
        <el-table-column prop="shrxm" label="审批人" width="120" show-overflow-tooltip />
        <el-table-column prop="shrq" label="审批时间" width="160" />
        <el-table-column prop="shjgStr" label="审批结论" width="120" show-overflow-tooltip />
        <el-table-column prop="shthyy" label="原因" show-overflow-tooltip />
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  .flow-box {
    height: 360px;
    line-height: 360px;
  }
  img {
    width: 100%;
  }
  .timeline-box {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .timeline-conten {
    border: 1px solid #dfdfdf;
    padding: 10px;
  }
  .card-item-xm {
    font-size: 14px;
    letter-spacing: 0px;
    color: #4b5881;
    font-weight: bold;
    margin-right: 30px;
  }
  .card-item-nr {
    font-size: 14px;
    color: #05b75d;
  }
  .el-empty {
    width: 100%;
    height: 100%;
  }
}
</style>
